<template>
  <div class="aa">
      <div class=""><a class="close" id="close" href="http://localhost:8080/#/commodity" title="关闭" tabindex="14"></a></div>
      <div class="tyesw">用户注册</div>
      <div class="kuy">
        以有账号
        <span class="switch" id="switcher_qlogin"  @click="swd = true">返回登录</span>
      </div>
      <div class="kuyh">
        <input type="text" class="control" placeholder="用户名" >
        <input type="password" class="crol" placeholder="密码">
        <input type="password" class="crol" placeholder="确认密码">
        <div >
          <input type="submit" tabindex="6" value="注册" class="btn" id="login_button">
        </div>
      </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.aa {
    height: 368px;
    width: 622px;
    margin: -184px 0px 0px -311px;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #fff;
     .abc {
        widows: 47px;
        height: 20px;
       }
      .close {
        width: 47px;
        height: 20px;
        float: right;
        background: url(//imgcache.qq.com/ptlogin/v4/style/40/images/icon_3_tiny.png) -225px -126px no-repeat;
        _background: url(//imgcache.qq.com/ptlogin/v4/style/40/images/icon_3_8.png) -225px -126px no-repeat;
        outline: 0;
     }
     .tyes {
       font-size: 24px;
       color: #000;
       margin:25px 239px ;
     }
      .kuy {
        font-size: 14px;
        color: #999;
        text-align: center;
         .switch {
           color: #2D77E5;
           cursor:pointer;
         }
      }
        .kuyh {
          width: 272px;
          height: 156px;
          margin: auto;
          margin-top: 20px;
           .control {
              width: 262px;
              position: relative;
              height: 18px;
              padding: 10px 0 10px 10px;
              line-height: 18px;
              border: none;
              border-radius: 4px;
              background: rgba(204,204,204,.2);
              color: #000;
              font-family: PingFang SC;
              font-size: 16px;
              outline: none;
           }
            .crol {
                width: 262px;
                position: relative;
                height: 18px;
                padding: 10px 0 10px 10px;
                line-height: 18px;
                border: none;
                border-radius: 4px;
                background: rgba(204,204,204,.2);
                color: #000;
                font-family: PingFang SC;
                font-size: 16px;
                outline: none;
                margin-top: 15px;
            }
              .btn {
                width: 272px;
                height: 40px;
                color: #fff;
                font-size: 16px;
                background-color: #09f;
                border-radius: 4px;
                border: 0;
                left: 0;
                outline: 0;
                margin-top: 25px;
              }
        }
          .bottom {
            height: 16px;
            margin-bottom: 15px;
            width: 100%;
            position: absolute;
            bottom: 0;
            text-align: center;
            font-size: 16px;
            color: #000;
            line-height: 20px;
             .dotted {
               margin: 0 5px;
             }
              .link {
                color: #000;
              }
          }
              .tyesw {
                font-size: 24px;
       color: #000;
       margin:25px 263px ;
              }
  }
</style>
